<template>
    <div class="manager">
        <!--个人信息模块-->
        <details open>
            <summary>个人信息（必填）</summary>
            <div class="tab-content" :readonly="!edit_status.base_info">
                <fieldset>
                    <legend>个人信息模块控制：</legend>
                    <table cellpadding="5" cellspacing="0" class="main" width="100%">
                        <tbody>
                            <tr class="name">
                                <td width="140px" align="right">姓名&nbsp;</td>
                                <td width="auto"><input type="text" autocorrect="off" spellcheck="false"
                                        autocapitalize="off" placeholder="您的真实姓名" v-model="base_info.content.name"
                                        :readonly="!edit_status.base_info"></td>
                            </tr>
                            <tr class="gender">
                                <td width="140px" align="right">性别&nbsp;</td>
                                <td>
                                    <select v-model="base_info.content.gender" :readonly="!edit_status.base_info">
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </td>
                            </tr>
                            <tr class="school">
                                <td width="140px" align="right">学校</td>
                                <td>
                                    <input type="text" autocorrect="off" spellcheck="false" autocapitalize="off"
                                        placeholder="您的学校" v-model="base_info.content.school"
                                        :readonly="!edit_status.base_info">
                                </td>
                            </tr>
                            <tr class="highest_degree">
                                <td width="140px" align="right">最高学历</td>
                                <td>
                                    <input type="text" autocorrect="off" spellcheck="false" autocapitalize="off"
                                        placeholder="最高学历" v-model="base_info.content.highest_degree"
                                        :readonly="!edit_status.base_info">
                                </td>
                            </tr>
                            <tr class="email">
                                <td width="140px" align="right">邮箱</td>
                                <td>
                                    <input type="text" autocorrect="off" spellcheck="false" autocapitalize="off"
                                        placeholder="邮箱" v-model="base_info.content.email"
                                        :readonly="!edit_status.base_info">
                                </td>
                            </tr>
                            <tr class="phone">
                                <td width="140px" align="right">联系电话</td>
                                <td>
                                    <input type="text" autocorrect="off" spellcheck="false" autocapitalize="off"
                                        placeholder="联系电话" v-model="base_info.content.phone"
                                        :readonly="!edit_status.base_info">
                                </td>
                            </tr>
                            <tr class="phone">
                                <td width="140px" align="right">真实照片</td>
                                <td>
                                    <input type="file" accept="image/*" autocorrect="off" spellcheck="false"
                                        autocapitalize="off" placeholder="真实照片" :readonly="!edit_status.base_info">
                                </td>
                            </tr>
                            <tr class="action">
                                <td width="140px" align="right"><button
                                        @click="updateEditStatus('base_info')">修改</button></td>
                                <td><button @click="saveBaseInfo">保存</button></td>
                            </tr>
                        </tbody>
                    </table>
                </fieldset>
            </div>
        </details>
        <!--自我评价模块-->
        <details>
            <summary>自我评价</summary>
            <div class="tab-content" :readonly="!edit_status.self_evaluation">
                <fieldset>
                    <legend>自我评价模块控制：</legend>
                    <div class="visiable">
                        <input type="radio" id="contactChoice1" name="contact" value='true'
                            v-model="visiable.self_evaluation_visiable" :readonly="!edit_status.self_evaluation" />
                        <label for="contactChoice1">显示</label>

                        <input type="radio" id="contactChoice2" name="contact" value='false'
                            v-model="visiable.self_evaluation_visiable" :readonly="!edit_status.self_evaluation" />
                        <label for="contactChoice2">隐藏</label>
                    </div>
                    <div class="order">
                        <div class="current_index">当前优先级：{{ self_evaluation.index }}&emsp;
                            <button class="up" @click="indexUP(self_evaluation)">↑</button>
                            <button class="down" @click="indexDown(self_evaluation)">↓</button>
                        </div>
                    </div>
                    <textarea v-model="self_evaluation.content.self_evaluation"
                        :readonly="!edit_status.self_evaluation"></textarea>
                    <button @click="saveSelfEvaluarion">保存</button>
                    <button @click="updateEditStatus('self_evaluation')">修改</button>

                </fieldset>

            </div>
        </details>
        <!--教育经历模块-->
        <details>
            <summary>教育经历</summary>
            <div class="tab-content" :readonly="edit_status.educational_experience">
                <fieldset>
                    <legend>教育经历模块控制：</legend>
                    <div class="visiable">
                        <input type="radio" id="contactChoice1" name="contact" value='true'
                            v-model="visiable.educational_experience_visiable" />
                        <label for="contactChoice1">显示</label>

                        <input type="radio" id="contactChoice2" name="contact" value='false'
                            v-model="visiable.educational_experience_visiable" />
                        <label for="contactChoice2">隐藏</label>
                    </div>
                    <div class="order">
                        <div class="current_index">当前优先级：{{ educational_experience.index }}&emsp;
                            <button class="up" @click="indexUP(educational_experience)">↑</button>
                            <button class="down" @click="indexDown(educational_experience)">↓</button>
                        </div>
                    </div>
                    <table class="edu_table">
                        <thead>
                            <tr>
                                <th style="width: 40px;">序号</th>
                                <th></th>
                                <th style="width: 180px;">开始-结束</th>
                                <th></th>
                                <th style="width: 90px;">就读学校</th>
                                <th></th>
                                <th style="width: 60px;">学历</th>
                                <th></th>
                                <th style="width: 120px;">专业</th>
                                <th></th>
                                <th style="width: 300px;">主修课程</th>
                                <th></th>
                                <th style="width: 40px;">成绩</th>
                                <th></th>
                                <th style="width: 140px;">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="experience, index in educational_experience.content.educational_experience">
                                <td>{{ index + 1 }}</td>
                                <td></td>
                                <td>{{ momentFormatYear(experience.begin_date) }}-{{ momentFormatYear(experience.end_date) }}
                                </td>
                                <td></td>
                                <td>{{ experience.attend_school }}</td>
                                <td></td>
                                <td>{{ experience.degree }}</td>
                                <td></td>
                                <td>{{ experience.major }}</td>
                                <td></td>
                                <td>{{ experience.major_courses.map(course => ' ' + course).toString() }}</td>
                                <td></td>
                                <td>{{ experience.grades }}</td>
                                <td></td>
                                <td>
                                    <button @click="editEducationExperience(index)">编辑</button>
                                    <button @click="deleteEducationExperience(index)">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <button @click="addEducationExperience">继续?添加</button>
                    <button style="margin-left: 8px;" @click="saveEducationalExperience">保存</button>
                </fieldset>
            </div>
        </details>
        <!--相关技能模块-->
        <details>
            <summary>相关技能</summary>
            <div class="tab-content" :readonly="edit_status.expertise">
                <fieldset>
                    <legend>相关技能模块控制：</legend>
                    <div class="visiable">
                        <input type="radio" id="contactChoice1" name="contact" value='true'
                            v-model="visiable.expertise_visiable" />
                        <label for="contactChoice1">显示</label>

                        <input type="radio" id="contactChoice2" name="contact" value='false'
                            v-model="visiable.expertise_visiable" />
                        <label for="contactChoice2">隐藏</label>
                    </div>
                    <div class="order">
                        <div class="current_index">当前优先级：{{ expertises.index }}&emsp;
                            <button class="up" @click="indexUP(expertises)">↑</button>
                            <button class="down" @click="indexDown(expertises)">↓</button>
                        </div>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>相关技能</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="expertise, index in expertises.content.expertises">
                                <td>{{ index + 1 }}</td>
                                <td>{{ expertise }}</td>
                                <td>
                                    <button @click="editExpertise(index)">编辑</button>
                                    <button @click="deleteExpertise(index)">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <button @click="addExpertises">继续？添加技能</button>
                    <button @click="saveExpertises">保存</button>
                    <button @click="updateEditStatus('expertises')">修改</button>
                </fieldset>
            </div>
        </details>
        <!-- 荣誉奖项模块 -->
        <details>
            <summary>荣誉奖项</summary>
            <div class="tab-content" :readonly="edit_status.honorary_awards">
                <fieldset>
                    <legend>荣誉奖项模块控制：</legend>
                    <div class="visiable">
                        <input type="radio" id="contactChoice1" name="contact" value='true'
                            v-model="visiable.honorary_awards_visiable" />
                        <label for="contactChoice1">显示</label>

                        <input type="radio" id="contactChoice2" name="contact" value='false'
                            v-model="visiable.honorary_awards_visiable" />
                        <label for="contactChoice2">隐藏</label>
                    </div>
                    <div class="order">
                        <div class="current_index">当前优先级：{{ honorary_awards.index }}&emsp;
                            <button class="up" @click="indexUP(honorary_awards)">↑</button>
                            <button class="down" @click="indexDown(honorary_awards)">↓</button>
                        </div>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>开始-结束</th>
                                <th>荣誉奖项</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="honorary_award, index in honorary_awards.content.honorary_awards">
                                <td>{{ index + 1 }}</td>
                                <td>{{ momentFormatYear(honorary_award.begin_date) }} - {{
                momentFormatYear(honorary_award.end_date) }}
                                </td>
                                <td>{{ honorary_award.awards.map(award => ' ' + award).toString() }}</td>
                                <td>
                                    <button @click="editHonoraryAwards(index)">编辑</button>
                                    <button @click="deleteHonoraryAwards(index)">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <button @click="addHonoraryAwards">继续？添加奖项</button>
                    <button @click="saveHonoraryAwards">保存</button>
                    <button @click="updateEditStatus('honorary_awards')">修改</button>
                </fieldset>
            </div>
        </details>
        <!-- 项目经历模块-->
        <details>
            <summary>项目经历</summary>
            <div class="tab-content" :readonly="edit_status.project_experience">
                <fieldset>
                    <legend>项目经历模块控制：</legend>
                    <div class="visiable">
                        <input type="radio" id="contactChoice1" name="contact" value='true'
                            v-model="visiable.project_experience_visiable" />
                        <label for="contactChoice1">显示</label>

                        <input type="radio" id="contactChoice2" name="contact" value='false'
                            v-model="visiable.project_experience_visiable" />
                        <label for="contactChoice2">隐藏</label>
                    </div>
                    <div class="order">
                        <div class="current_index">当前优先级：{{ project_experience.index }}&emsp;
                            <button class="up" @click="indexUP(project_experience)">↑</button>
                            <button class="down" @click="indexDown(project_experience)">↓</button>
                        </div>
                    </div>
                    <div v-for="(project, index) in project_experience.content.project_experience" :key="index"
                        class="project-item">
                        <fieldset>
                            <legend style="font-size: 16px; font-weight: 600;">项目经历{{ index + 1 }}</legend>
                            <p><strong>项目名称:</strong> {{ project.project_name }}</p>
                            <p><strong>开始-结束:</strong> {{ momentFormatYearMonth(project.begin_date) }} -
                                {{ momentFormatYearMonth(project.end_date) }}</p>
                            <p><strong>项目描述:</strong> {{ project.project_description }}</p>
                            <p><strong>技术栈:</strong> {{ project.tech_stack }}</p>
                            <p><strong>项目职责和贡献:</strong></p>
                            <ul>
                                <li v-if="typeof project.project_responsibility != 'string'"
                                    v-for="(do_item, do_index) in project.project_responsibility" :key="do_index">
                                    {{ do_index + 1 }}. {{ do_item }}</li>
                            </ul>
                            <div class="action-container">
                                <hr class="hr-space-square">
                                <button @click="editProjectExperience(index)">编辑</button>
                                <button @click="deleteProjectExperience(index)">删除</button>
                                <hr class="hr-space-square">
                            </div>
                        </fieldset>
                    </div>
                    <button @click="addProjectExperience">继续？添加项目经历</button>
                    <button @click="saveProjectExperience">保存</button>
                    <button>修改</button>
                </fieldset>
            </div>
        </details>
        <!-- 实习经历模块-->
        <details>
            <summary>实习经历</summary>
            <div class="tab-content">
                <fieldset>
                    <legend>实习经历模块控制：</legend>
                    <div class="visiable">
                        <input type="radio" id="contactChoice1" name="contact" value='true' v-model="visiable.internship_experience_visiable">
                        <label for="contactChoice1">显示</label>

                        <input type="radio" id="contactChoice2" name="contact" value='false' v-model="visiable.internship_experience_visiable">
                        <label for="contactChoice2">隐藏</label>
                    </div>
                    <div class="order">
                        <div class="current_index">当前优先级：{{ internship_experience.index }}&emsp;
                            <button class="up" @click="indexUP(internship_experience)">↑</button>
                            <button class="down" @click="indexDown(internship_experience)">↓</button>
                        </div>
                    </div>
                    <div v-for="(internship, index) in internship_experience.content.internship_experience" :key="index"
                        class="internship-item">
                        <fieldset>
                            <legend style="font-size: 16px; font-weight: 600;">实习经历{{ index + 1 }}</legend>
                            <p><strong>公司名称:</strong> {{ internship.company }}</p>
                            <p><strong>开始-结束:</strong> {{ momentFormatYearMonth(internship.begin_date) }} -
                                {{ momentFormatYearMonth(internship.end_date) }}</p>
                            <p><strong>实习岗位:</strong> {{ internship.position }}</p>
                            <p><strong>所属部门:</strong> {{ internship.department }}</p>
                            <p><strong>项目经历:</strong></p>
                            <ul>
                                <li v-for="(project, project_index) in internship.project_experience" :key="project_index">
                                    <p><strong>项目名称:</strong> {{ project.project_name }}</p>
                                    <p><strong>开始-结束:</strong> {{ momentFormatYear(project.begin_date) }} -
                                        {{ momentFormatYear(project.end_date) }}</p>
                                    <p><strong>项目描述:</strong> {{ project.project_description }}</p>
                                    <p><strong>技术栈:</strong> {{ project.tech_stack }}</p>
                                    <p><strong>项目职责和贡献:</strong></p>
                                    <ul>
                                        <li v-if="typeof project.project_responsibility != 'string'"
                                            v-for="(do_item, do_index) in project.project_responsibility" :key="do_index">
                                            {{ do_index + 1 }}. {{ do_item }}</li>
                                    </ul>
                                </li>
                            </ul>
                            <div class="action-container">
                                <hr class="hr-space-square">
                                <button @click="editInternshipExperience(index)">编辑</button>
                                <button @click="deleteIntershipExperience(index)">删除</button>
                                <hr class="hr-space-square">
                            </div>
                        </fieldset>
                    </div>
                    <button @click="addInternshipExperience">继续？添加实习经历</button>
                    <button @click="saveInternshipExperience">保存</button>
                    <button>修改</button>
                </fieldset>
            </div>
        </details>


        <!-- 编辑教育经历对话框 -->
        <div v-if="editingExperience !== null" class="dialog-overlay">
            <div class="edit-dialog">
                <h3>编辑教育经历</h3>
                <div class="form-group">
                    <label class="required">开始日期</label>
                    <div class="input-wrapper">
                        <input type="date" v-model="editingExperience.begin_date">
                    </div>
                </div>

                <div class="form-group">
                    <label class="required">结束日期</label>
                    <div class="input-wrapper">
                        <input type="date" v-model="editingExperience.end_date">
                    </div>
                </div>

                <div class="form-group">
                    <label class="required">就读学校</label>
                    <div class="input-wrapper">
                        <input type="text" v-model="editingExperience.attend_school" placeholder="请输入学校名称">
                    </div>
                </div>

                <div class="form-group">
                    <label class="required">学历</label>
                    <div class="input-wrapper">
                        <select v-model="editingExperience.degree">
                            <option value="" disabled selected>请选择学历</option>
                            <option value="专科">专科</option>
                            <option value="本科">本科</option>
                            <option value="硕士">硕士</option>
                            <option value="博士">博士</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="required">专业</label>
                    <div class="input-wrapper">
                        <input type="text" v-model="editingExperience.major" placeholder="请输入专业名称">
                    </div>
                </div>

                <div class="form-group">
                    <label>成绩</label>
                    <div class="input-wrapper">
                        <input type="text" v-model="editingExperience.grades" placeholder="请输入成绩">
                    </div>
                </div>

                <div class="form-group">
                    <label>主修课程</label>
                    <div class="input-wrapper">
                        <textarea v-model="editingExperience.major_courses" placeholder="请输入主修课程，多个课程用逗号分隔"></textarea>
                    </div>
                </div>

                <div class="button-group">
                    <button class="cancel-btn" @click="cancelEdit">取消</button>
                    <button class="save-btn" @click="saveEdit">保存</button>
                </div>
            </div>
        </div>
        <!-- 编辑技能对话框 -->
        <div v-if="editingExpertise !== null" class="edit-dialog">
            <h3>编辑技能</h3>
            <label>技能：</label>
            <textarea type="text" v-model="editingExpertise" />
            <button @click="cancelEditingExpertise">取消</button>
            <button @click="saveEditingExpertise">保存</button>
        </div>
        <!-- 编辑荣誉奖项对话框 -->
        <div v-if="editingHonoraryAwards !== null" class="edit-dialog">
            <h3>编辑荣誉奖项</h3>
            <label>开始日期：</label>
            <input type="date" v-model="editingHonoraryAwards.begin_date">
            <!-- 其他输入框 -->
            <label>结束日期：</label>
            <input type="date" v-model="editingHonoraryAwards.end_date">
            <label>荣誉奖项：</label>
            <input type="text" v-model="editingHonoraryAwards.awards">
            <button @click="cancelEditHonoraryAward">取消</button>
            <button @click="saveEditHonoraryAward">保存</button>
        </div>
        <!-- 编辑项目经历对话框-->
        <div v-if="editingProjectExperience !== null" class="edit-dialog">
            <h3>编辑项目经历</h3>
            <label>项目名称：</label>
            <input type="text" v-model="editingProjectExperience.project_name">
            <label>开始日期：</label>
            <input type="date" v-model="editingProjectExperience.begin_date">
            <label>结束日期：</label>
            <input type="date" v-model="editingProjectExperience.end_date">
            <label>项目描述：</label>
            <textarea type="text" v-model="editingProjectExperience.project_description" />
            <label>技术栈：</label>
            <input type="text" v-model="editingProjectExperience.tech_stack">
            <label>项目职责和贡献：</label>
            <textarea type="text" v-model="editingProjectExperience.project_responsibility" />
            <button @click="cancelEditProjectExperience">取消</button>
            <button @click="saveEditProjectExperience">保存</button>
        </div>
        <!-- 编辑实习经历对话框-->
        <div v-if="editingInternshipExperience !== null" class="edit-dialog">
            <h3>编辑实习经历</h3>
            <label>公司名称：</label>
            <input type="text" v-model="editingInternshipExperience.company">
            <label>开始日期：</label>
            <input type="date" v-model="editingInternshipExperience.begin_date">
            <label>结束日期：</label>
            <input type="date" v-model="editingInternshipExperience.end_date">
            <label>实习岗位：</label>
            <input type="text" v-model="editingInternshipExperience.position">
            <label>所属部门：</label>
            <input type="text" v-model="editingInternshipExperience.department">
            <label>项目经历：</label>
            <div v-for="(project, index) in editingInternshipExperience.project_experience" :key="index"
                class="project-item">
                <fieldset>
                    <legend style="font-size: 16px; font-weight: 600;">项目经历{{ index + 1 }}</legend>
                    <label>项目名称：</label>
                    <input type="text" v-model="project.project_name">
                    <label>开始日期：</label>
                    <input type="date" v-model="project.begin_date">
                    <label>结束日期：</label>
                    <input type="date" v-model="project.end_date">
                    <label>项目描述：</label>
                    <textarea type="text" v-model="project.project_description" />
                    <label>技术栈：</label>
                    <input type="text" v-model="project.tech_stack">
                    <label>项目职责和贡献：</label>
                    <textarea type="text" v-model="project.project_responsibility" />
                </fieldset>
            </div>
            <button @click="cancelEditInternshipExperience">取消</button>
            <button @click="saveEditInternshipExperience">保存</button>
        </div>
        <!-- 添加荣誉奖项对话框 -->
        <div v-if="toAddHonoraryAwards !== null" class="edit-dialog">
            <h3>编辑荣誉奖项</h3>
            <label>开始日期：</label>
            <input type="date" v-model="toAddHonoraryAwards.begin_date">
            <!-- 其他输入框 -->
            <label>结束日期：</label>
            <input type="date" v-model="toAddHonoraryAwards.end_date">
            <label>荣誉奖项：</label>
            <input type="text" v-model="toAddHonoraryAwards.awards">
            <button @click="cancelAddHonoraryAwards">取消</button>
            <button @click="saveAddHonoraryAwards">保存</button>
        </div>
        <!-- 添加教育经历对话框 -->
        <div v-if="toAddExperience !== null" class="dialog-overlay">
            <div class="edit-dialog">
                <h3>编辑教育经历</h3>
                <div class="form-group">
                    <label class="required">开始日期</label>
                    <div class="input-wrapper">
                        <input type="date" v-model="toAddExperience.begin_date">
                    </div>
                </div>

                <div class="form-group">
                    <label class="required">结束日期</label>
                    <div class="input-wrapper">
                        <input type="date" v-model="toAddExperience.end_date">
                    </div>
                </div>

                <div class="form-group">
                    <label class="required">就读学校</label>
                    <div class="input-wrapper">
                        <input type="text" v-model="toAddExperience.attend_school" placeholder="请输入学校名称">
                    </div>
                </div>

                <div class="form-group">
                    <label class="required">学历</label>
                    <div class="input-wrapper">
                        <select v-model="toAddExperience.degree">
                            <option value="" disabled selected>请选择学历</option>
                            <option value="专科">专科</option>
                            <option value="本科">本科</option>
                            <option value="硕士">硕士</option>
                            <option value="博士">博士</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="required">专业</label>
                    <div class="input-wrapper">
                        <input type="text" v-model="toAddExperience.major" placeholder="请输入专业名称">
                    </div>
                </div>

                <div class="form-group">
                    <label>成绩</label>
                    <div class="input-wrapper">
                        <input type="text" v-model="toAddExperience.grades" placeholder="请输入成绩">
                    </div>
                </div>

                <div class="form-group">
                    <label>主修课程</label>
                    <div class="input-wrapper">
                        <textarea v-model="toAddExperience.major_courses" placeholder="请输入主修课程，多个课程用逗号分隔"></textarea>
                    </div>
                </div>

                <div class="button-group">
                    <button class="cancel-btn" @click="cancelAdd">取消</button>
                    <button class="save-btn" @click="saveAdd">保存</button>
                </div>
            </div>
        </div>
        <!-- 添加技能对话框 -->
        <div v-if="toAddExpertise !== null" class="edit-dialog">
            <h3>编辑技能</h3>
            <label>技能：</label>
            <textarea type="text" v-model="toAddExpertise" />
            <button @click="cancelAddExpertise">取消</button>
            <button @click="saveAddExpertise">保存</button>
        </div>
        <!-- 添加项目经历对话框 -->
        <div v-if="toAddProjectExperience !== null" class="edit-dialog">
            <h3>编辑项目经历</h3>
            <label>项目名称：</label>
            <input type="text" v-model="toAddProjectExperience.project_name">
            <label>开始日期：</label>
            <input type="date" v-model="toAddProjectExperience.begin_date">
            <label>结束日期：</label>
            <input type="date" v-model="toAddProjectExperience.end_date">
            <label>项目描述：</label>
            <textarea type="text" v-model="toAddProjectExperience.project_description" />
            <label>技术栈：</label>
            <input type="text" v-model="toAddProjectExperience.tech_stack">
            <label>项目职责和贡献：</label>
            <textarea type="text" v-model="toAddProjectExperience.project_responsibility" />
            <button @click="cancelAddProjectExperience">取消</button>
            <button @click="saveAddProjectExperience">保存</button>
        </div>
        <!-- 添加实习经历对话框-->
        <div v-if="toAddInternshipExperience !== null" class="edit-dialog" style="width: 380px;">
            <h3>编辑实习经历</h3>
            <label>公司名称：</label>
            <input type="text" v-model="toAddInternshipExperience.company">
            <label>开始日期：</label>
            <input type="date" v-model="toAddInternshipExperience.begin_date">
            <label>结束日期：</label>
            <input type="date" v-model="toAddInternshipExperience.end_date">
            <label>实习岗位：</label>
            <input type="text" v-model="toAddInternshipExperience.position">
            <label>所属部门：</label>
            <input type="text" v-model="toAddInternshipExperience.department">
            <label>项目经历：</label>
            <div v-for="(project, index) in toAddInternshipExperience.project_experience" :key="index"
                class="project-item">
                <fieldset>
                    <legend style="font-size: 16px; font-weight: 600;">项目经历{{ index + 1 }}</legend>
                    <label>项目名称：</label>
                    <input type="text" v-model="project.project_name">
                    <label>开始日期：</label>
                    <input type="date" v-model="project.begin_date">
                    <label>结束日期：</label>
                    <input type="date" v-model="project.end_date">
                    <label>项目描述：</label>
                    <textarea type="text" v-model="project.project_description" />
                    <label>技术栈：</label>
                    <input type="text" v-model="project.tech_stack">
                    <label>项目职责和贡献：</label>
                    <textarea type="text" v-model="project.project_responsibility" />
                </fieldset>
            </div>
            <button @click="cancelAddInternshipExperience">取消</button>
            <button @click="saveAddInternshipExperience">保存</button>
        </div>

    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { BaseInfo, EducationalExperience, EducationalExperienceUnit, Expertise, InternshipExperience, SelfEvaluation } from '../../type/typing';
import { useStore } from '../../store/store';
import { momentFormatYear, momentFormatYearMonth } from '../../utils/moments';
import { HonoraryAwards } from '../../type/typing';
import { ProjectExperience } from '../../type/typing';

const editingExperience: any = ref<EducationalExperienceUnit | null>(null); // 存储当前正在编辑的教育经历对象
const editingExperienceIndex = ref<number>(-1); // 存储当前正在编辑的教育经历对象在数组中的索引
const editingExpertise: any = ref<string | null>(null); // 存储当前正在编辑的技能对象
const editingHonoraryAwards: any = ref<string | null>(null); // 存储当前正在编辑的荣誉奖项对象
const editingHonoraryAwardsIndex = ref<number>(-1); // 存储当前正在编辑的荣誉奖项对象在数组中的索引
const editingExpertiseIndex = ref<number>(-1); // 存储当前正在编辑的技能对象在数组中的索引
const editingProjectExperience: any = ref<ProjectExperience | null>(null); // 存储当前正在编辑的项目经历对象
const editingProjectExperienceIndex = ref<number>(-1); // 存储当前正在编辑的项目经历对象在数组中的索引
const editingInternshipExperience: any = ref<InternshipExperience | null>(null); // 存储当前正在编辑的实习经历对象
const editingInternshipExperienceIndex = ref<number>(-1); // 存储当前正在编辑的实习经历对象在数组中的索引
const toAddExperience: any = ref<EducationalExperienceUnit | null>(null); // 存储当前正在编辑的教育经历对象
const toAddExpertise: any = ref<string | null>(null); // 存储当前正在编辑的教育经历对象
const toAddHonoraryAwards: any = ref<string | null>(null); // 存储当前正在编辑的荣誉奖项对象
const toAddProjectExperience: any = ref<ProjectExperience | null>(null); // 存储当前正在编辑的项目经历对象
const toAddInternshipExperience: any = ref<InternshipExperience | null>(null); // 存储当前正在编辑的实习经历对象


const store = useStore()
/**
 * 个人信息
 */
const base_info = reactive<BaseInfo>({
    visiable: true,
    content: {
        name: '',
        gender: '男',
        school: '',
        highest_degree: '学士',
        email: '',
        phone: '',
    },
    index: 0,
})

/**
 * 自我评价
 */
const self_evaluation = reactive<SelfEvaluation>({
    visiable: true,
    content: {
        self_evaluation: '',
    },
    index: 2,
})

/**
 * 教育经历
 */
const educational_experience = reactive<EducationalExperience>({
    visiable: true,
    content: {
        educational_experience: [
            {
                begin_date: new Date(),
                end_date: new Date(),
                attend_school: '',
                degree: '',
                major: '',
                major_courses: [
                    '课程1',
                    '课程2',
                    '课程3',
                ],
                grades: '',
            }
        ],
    },
    index: 2,
})

/**
 * 相关技能
 */
const expertises = reactive<Expertise>({
    visiable: true,
    content: {
        expertises: [
            '技能1',
            '技能2',
            '技能3',
        ],
    },
    index: 3,
})

/**
 * 荣誉奖项
 */
const honorary_awards = reactive<HonoraryAwards>({
    visiable: true,
    content: {
        honorary_awards: [
            {
                begin_date: new Date(),
                end_date: new Date(),
                awards: [
                    '奖项1',
                    '奖项2',
                    '奖项3',
                ],
            }
        ],
    },
    index: 4,
})

/**
 * 项目经历
 */
const project_experience = reactive<ProjectExperience>({
    visiable: true,
    content: {
        project_experience: [
            {
                project_name: '',
                begin_date: new Date(),
                end_date: new Date(),
                project_description: '',
                tech_stack: '',
                project_responsibility: [''],
            }
        ],
    },
    index: 5,
})

const internship_experience = reactive<InternshipExperience>({
    visiable: true,
    content: {
        internship_experience: [
            {
                company: '',
                position: '',
                department: '',
                begin_date: new Date(),
                end_date: new Date(),
                project_experience: [
                    {
                        project_name: '',
                        begin_date: new Date(),
                        end_date: new Date(),
                        project_description: '',
                        tech_stack: '',
                        project_responsibility: [''],
                    }
                ]
            }
        ],
    },
    index: 6,
})

/**
 * 控制模块显示状态
 */
const visiable = ref<{
    self_evaluation_visiable: string;
    educational_experience_visiable: string;
    expertise_visiable: string;
    honorary_awards_visiable: string;
    project_experience_visiable: string;
    internship_experience_visiable: string;
}>({
    self_evaluation_visiable: 'true',
    educational_experience_visiable: 'true',
    expertise_visiable: 'true',
    honorary_awards_visiable: 'true',
    project_experience_visiable: 'true',
    internship_experience_visiable: 'true',
});


/**
 * 控制编辑状态
 */
const edit_status = ref<{
    base_info: boolean;
    self_evaluation: boolean;
    educational_experience: boolean;
    expertise: boolean;
    honorary_awards: boolean;
    project_experience: boolean;
    internship_experience: boolean;
}>({
    base_info: true,
    self_evaluation: true,
    educational_experience: true,
    expertise: true,
    honorary_awards: true,
    project_experience: true,
    internship_experience: true,
});


onMounted(() => {
    initData();
})

/**
 * 初始化数据
 */
function initData() {
    base_info.visiable = store.base_info.visiable;
    base_info.content = store.base_info.content;
    base_info.index = store.base_info.index;
    self_evaluation.visiable = store.self_evaluation.visiable;
    self_evaluation.content = store.self_evaluation.content;
    self_evaluation.index = store.self_evaluation.index;
    educational_experience.visiable = store.educational_experience.visiable;
    educational_experience.content = store.educational_experience.content;
    educational_experience.index = store.educational_experience.index;
    expertises.visiable = store.expertise.visiable;
    expertises.content = store.expertise.content;
    expertises.index = store.expertise.index;
    honorary_awards.visiable = store.honorary_awards.visiable;
    honorary_awards.content = store.honorary_awards.content;
    honorary_awards.index = store.honorary_awards.index;
    project_experience.visiable = store.project_experience.visiable;
    project_experience.content = store.project_experience.content;
    project_experience.index = store.project_experience.index;
    internship_experience.visiable = store.internship_experience.visiable;
    internship_experience.content = store.internship_experience.content;
    internship_experience.index = store.internship_experience.index;
}


/**
 * 保存基本信息
 */
function saveBaseInfo() {
    edit_status.value.base_info = false;
    const baseInfoCopy = Object.assign({}, base_info);
    store.updateBaseInfo(baseInfoCopy); // 提交复制后的内容到全局状态
    alert("已经成功保存")
}

/**
 * 保存自我评价
 */
function saveSelfEvaluarion() {
    edit_status.value.self_evaluation = false;
    self_evaluation.visiable = visiable.value.self_evaluation_visiable === 'true';
    const selfEvaluationCopy = Object.assign({}, self_evaluation);
    store.updateSelfEvaluation(selfEvaluationCopy); // 提交复制后的内容到全局状态\
    alert("已经成功保存")
}

/**
 * 保存教育经历
 */
function saveEducationalExperience() {
    console.log(educational_experience.content.educational_experience)
    edit_status.value.educational_experience = false;
    educational_experience.visiable = visiable.value.educational_experience_visiable === 'true';
    const educationalExperienceCopy = Object.assign({}, educational_experience);
    store.updateEducationalExperience(educationalExperienceCopy); // 提交复制后的内容到全局状态
    alert("已经成功保存")
}

/**
 * 保存相关技能
 */
function saveExpertises() {
    edit_status.value.expertise = false;
    expertises.visiable = visiable.value.expertise_visiable === 'true';
    const expertisesCopy = Object.assign({}, expertises);
    store.updateExpertise(expertisesCopy); // 提交复制后的内容到全局状态
    alert("已经成功保存")
}

function saveHonoraryAwards() {
    edit_status.value.honorary_awards = false;
    honorary_awards.visiable = visiable.value.honorary_awards_visiable === 'true';
    const honoraryAwardsCopy = Object.assign({}, honorary_awards);
    store.updateHonoraryAwards(honoraryAwardsCopy); // 提交复制后的内容到全局状态
    alert("已经成功保存")
}

function saveProjectExperience() {
    edit_status.value.project_experience = false;
    project_experience.visiable = visiable.value.project_experience_visiable === 'true';
    const projectExperienceCopy = Object.assign({}, project_experience);
    store.updateProjectExperience(projectExperienceCopy); // 提交复制后的内容到全局状态
    alert("已经成功保存")
}

function saveInternshipExperience() {
    edit_status.value.internship_experience = false;
    internship_experience.visiable = visiable.value.internship_experience_visiable === 'true';
    const internshipExperienceCopy = Object.assign({}, internship_experience);
    store.updateInternshipExperience(internshipExperienceCopy); // 提交复制后的内容到全局状态
    alert("已经成功保存")
}

/**
 * 优先级上移一位
 * @param manager 
 */
function indexUP(manager: any) {
    manager.index = manager.index - 1
}

/**
 * 优先级下移一位
 * @param manager 
 */
function indexDown(manager: any) {
    manager.index = manager.index + 1
}

/**
 * 更新编辑状态
 * @param to_edit_status
 */
function updateEditStatus(to_edit_status: string) {
    edit_status.value[to_edit_status] = true

}

/**
 * 编辑教育经历
 * @param index 
 */
function editEducationExperience(index: number) {
    // 将被编辑的教育经历对象赋值给editingExperience，以便在编辑对话框中显示
    editingExperience.value = { ...educational_experience.content.educational_experience[index] };
    editingExperienceIndex.value = index; // 记录正在编辑的教育经历的索引
}

/**
 * 删除教育经历
 * @param index 
 */
function deleteEducationExperience(index: number) {
    educational_experience.content.educational_experience.splice(index, 1);
}

/**
 * 继续添加教育经历
 */
function addEducationExperience() {
    toAddExperience.value = {
        begin_date: new Date(),
        end_date: new Date(),
        attend_school: '',
        degree: '',
        major: '',
        major_courses: [
            '课程1',
            '课程2',
            '课程3',
        ],
        grades: '',
    };
}

/**
 * 取消编辑/添加
 */
function cancelEdit() {
    // 取消编辑，清空editingExperience和editingExperienceIndex
    editingExperience.value = null;
    editingExperienceIndex.value = -1;
    toAddExperience.value = null;
}

/**
 * 保存编辑
 */
function saveEdit() {
    if (editingExperienceIndex !== null) {
        // 如果存在正在编辑的教育经历，则保存修改后的教育经历到原数组中
        if (typeof editingExperience.value.major_courses == 'string') {
            editingExperience.value.major_courses = editingExperience.value.major_courses.split(',');
        }
        educational_experience.content.educational_experience[editingExperienceIndex.value] = editingExperience.value;
        // 清空editingExperience和editingExperienceIndex
        editingExperience.value = null;
        editingExperienceIndex.value = -1;
    }

}

/**
 * 取消编辑技能
 */
function cancelEditingExpertise() {
    editingExpertise.value = null;
    editingExpertiseIndex.value = -1;
}

/**
 * 保存编辑技能
 */
function saveEditingExpertise() {
    if (editingExpertiseIndex !== null) {
        expertises.content.expertises[editingExpertiseIndex.value] = editingExpertise.value;
        editingExpertise.value = null;
        editingExpertiseIndex.value = -1;
    }
}


/**
 * 继续添加技能
 */
function addExpertises() {
    toAddExpertise.value = '';
}

/**
 * 取消添加技能
 
 */
function cancelAddExpertise() {
    toAddExpertise.value = null;
}

/**
 * 保存添加技能
 */
function saveAddExpertise() {
    if (toAddExpertise !== null) {
        expertises.content.expertises.push(toAddExpertise.value);
        toAddExpertise.value = null;
    }
}

/**
 * 取消添加(教育经历)
 */
function cancelAdd() {
    toAddExperience.value = null;
}

/**
 * 保存添加（教育经历）
 */
function saveAdd() {
    if (toAddExperience !== null) {
        // 如果存在正在编辑的教育经历，则保存修改后的教育经历到原数组中
        console.log(typeof toAddExperience.value.major_courses == 'string')
        if (typeof toAddExperience.value.major_courses == 'string') {
            toAddExperience.value.major_courses = toAddExperience.value.major_courses.split(',');
        }
        educational_experience.content.educational_experience.push(toAddExperience.value);
        // 清空editingExperience和editingExperienceIndex
        toAddExperience.value = null;
    }

}

/**
 * 编辑技能
 */
function editExpertise(index: number) {
    editingExpertise.value = expertises.content.expertises[index];
    editingExpertiseIndex.value = index;
}

/**
 * 删除技能
 * @param index 
 */
function deleteExpertise(index: number) {
    expertises.content.expertises.splice(index, 1);
}

/**
 * 编辑荣誉奖项
 * @param index 
 */
function editHonoraryAwards(index: number) {
    editingHonoraryAwards.value = honorary_awards.content.honorary_awards[index];
    editingHonoraryAwardsIndex.value = index;

}

/**
 * 删除荣誉奖项
 * @param index 
 */
function deleteHonoraryAwards(index: number) {
    honorary_awards.content.honorary_awards.splice(index, 1);
}

/**
 * 继续添加荣誉奖项
 */
function addHonoraryAwards() {
    toAddHonoraryAwards.value = {
        begin_date: new Date(),
        end_date: new Date(),
        awards: [
            '奖项1',
            '奖项2',
            '奖项3',
        ],
    };
}

/**
 * 取消编辑荣誉奖项
 */
function cancelEditHonoraryAward() {
    editingHonoraryAwards.value = null;
    editingHonoraryAwardsIndex.value = -1;
}


/**
 * 保存修改荣誉奖项
 */
function saveEditHonoraryAward() {
    if (editingHonoraryAwardsIndex !== null) {
        if (typeof editingHonoraryAwards.value.awards == 'string') {
            editingHonoraryAwards.value.awards = editingHonoraryAwards.value.awards.split(',');
        }
        honorary_awards.content.honorary_awards[editingHonoraryAwardsIndex.value] = editingHonoraryAwards.value;
        editingHonoraryAwards.value = null;
        editingHonoraryAwardsIndex.value = -1;
    }
}

/**
 * 取消添加荣誉奖项
 */
function cancelAddHonoraryAwards() {
    toAddHonoraryAwards.value = null;
}

/**
 * 保存添加荣誉奖项
 */
function saveAddHonoraryAwards() {
    if (toAddHonoraryAwards !== null) {
        if (typeof toAddHonoraryAwards.value.awards == 'string') {
            toAddHonoraryAwards.value.awards = toAddHonoraryAwards.value.awards.split(',');
        }
        honorary_awards.content.honorary_awards.push(toAddHonoraryAwards.value);
        toAddHonoraryAwards.value = null;
    }
}


/**
 * 编辑项目经历
 */
function editProjectExperience(index:number) {
    editingProjectExperience.value = project_experience.content.project_experience[index];
    editingProjectExperienceIndex.value = -1;
}

/**
 * 取消编辑项目经历
 */
function cancelEditProjectExperience() {
    editingProjectExperience.value = null;
    editingProjectExperienceIndex.value = -1;
}

/**
 * 保存编辑项目经历
 */
function saveEditProjectExperience() {
    if (editingProjectExperience.value !== null) {
        if (typeof editingProjectExperience.value.project_responsibility == 'string') {
            editingProjectExperience.value.project_responsibility = editingProjectExperience.value.project_responsibility.split(',');
        }
        project_experience.content.project_experience[editingProjectExperienceIndex.value] = editingProjectExperience.value;
        editingProjectExperience.value = null;
        editingProjectExperienceIndex.value = -1;
    }
}

/**
 * 删除项目经历
 */
function deleteProjectExperience(index:number) {
    project_experience.content.project_experience.splice(index, 1);
}

/**
 * 添加项目经历
 */
function addProjectExperience() {
    toAddProjectExperience.value = {
        project_name: '',
        begin_date: new Date(),
        end_date: new Date(),
        project_description: '',
        tech_stack: '',
        project_responsibility: [''],
    };
}

/**
 * 取消添加项目经历
 */
function cancelAddProjectExperience() {
    toAddProjectExperience.value = null;
}

/**
 * 保存添加项目经历
 */
function saveAddProjectExperience() {
    if (toAddProjectExperience !== null) {
        if (typeof toAddProjectExperience.value.project_responsibility == 'string') {
            toAddProjectExperience.value.project_responsibility = toAddProjectExperience.value.project_responsibility.split(',');
        }
        project_experience.content.project_experience.push(toAddProjectExperience.value);
        toAddProjectExperience.value = null;
    }
}


/**
 * 添加实习经历
 */
function addInternshipExperience() {
    toAddInternshipExperience.value = {
        company: '',
        position: '',
        department: '',
        begin_date: new Date(),
        end_date: new Date(),
        project_experience: [
            {
                project_name: '',
                begin_date: new Date(),
                end_date: new Date(),
                project_description: '',
                tech_stack: '',
                project_responsibility: [''],
            }
        ]
    };

}


/**
 * 编辑实习经历
 */
function editInternshipExperience(index: number) {
    editingInternshipExperience.value = internship_experience.content.internship_experience[index];
    editingInternshipExperienceIndex.value = index;
}

/**
 * 删除实习经历
 */
function deleteIntershipExperience(index: number) {
    internship_experience.content.internship_experience.splice(index, 1);
}


function cancelAddInternshipExperience() {
    toAddInternshipExperience.value = null;
}

function saveAddInternshipExperience() {
    if (toAddInternshipExperience !== null) {
        if (typeof toAddInternshipExperience.value.project_experience[0].project_responsibility == 'string') {
            toAddInternshipExperience.value.project_experience[0].project_responsibility = toAddInternshipExperience.value.project_experience[0].project_responsibility.split(',');
        }
        internship_experience.content.internship_experience.push(toAddInternshipExperience.value);
        toAddInternshipExperience.value = null;
    }
}

function cancelEditInternshipExperience() {
    editingInternshipExperience.value = null;
    editingInternshipExperienceIndex.value = -1;
}

function saveEditInternshipExperience() {
    if (editingInternshipExperienceIndex !== null) {
        if (typeof editingInternshipExperience.value.project_experience[0].project_responsibility == 'string') {
            editingInternshipExperience.value.project_experience[0].project_responsibility = editingInternshipExperience.value.project_experience[0].project_responsibility.split(',');
        }
        internship_experience.content.internship_experience[editingInternshipExperienceIndex.value] = editingInternshipExperience.value;
        editingInternshipExperience.value = null;
        editingInternshipExperienceIndex.value = -1;
    }
}
</script>

<style scoped lang="scss">
@import url('../../style/mycss/manager.scss');
</style>